<template>
<div class="spot-container">
  <!--左侧文本容器-->
  <div class="left-content-pot">
    <!--企业名容器-->
    <div class="item-box">
      <span class="content-labe">抽查企业：</span>
      <span class="content-name">{{danInfoData.enterpriseName}}</span>
    </div>
    <!--日期容器-->
    <div class="item-box">
      <span class="content-labe">抽查日期：</span>
      <span class="content-name">{{danInfoData.checkDate}}</span>
    </div>
    <!--人员名容器-->
    <div class="item-box item-person-box">
      <span class="content-labe">抽查人员：</span>
      <el-tag size="mini" v-for="(item,index) in danInfoData.checkUserArr" :key="index">{{item}}</el-tag>
    </div>

  </div>
  <!--右侧按钮容器-->
  <div class="right-button-pot">

    <el-row>
      <el-button size="mini" plain type="primary" @click="showInfo">检查详情</el-button>
    </el-row>
  </div>

  <check-info ref="checkInfo"></check-info>
</div>
</template>

<script>
import CheckInfo from "@/views/components/CheckInfo/index.vue";
import {subPageMixin} from "@/views/checkBusPage/mixins/subPageMixins";

export default {
  mixins: [subPageMixin],
  components:{
    CheckInfo
  },
  props: {
    danInfoData: {
      type: Object
    }
  },
  methods:{
    showInfo() {
      let {inspectInfo} = this;
      this.$refs.checkInfo.showCheckInfo(inspectInfo.id)
    }
  }
}
</script>

<style lang="scss" scoped>
  //设置外容器中的内容器样式
  .spot-container{
    //设置宽高
    width: 100%;
    height: 100%;
    //设置内容器位置
    display: flex;
    justify-content: space-between;
    align-items: center;
    //设置左侧内容容器样式
    .left-content-pot{
      //设置高度
      height: 100%;
      //设置内容与上边间距
      &:first-child{
        margin-top:20px;
      }
      //设置内容公共样式
      .item-box{
        //位置设置
        margin-top: 10px; //设置条目间距
        margin-left: 10px;  // 设置与左边间距
        //文本样式设置
        .content-labe{
          color: rgba(144, 147, 153, 1);
        }
        .content-name{
          color: rgba(48, 49, 51, 1);
        }
      }
      //设置督查人员容器样式
      .item-person-box{
        //设置内部元素位置
        display: flex;
        align-items: center;
        .el-tag{
          margin-left: 10px;//设置人员间距
        }
      }

    }
    //设置右侧按钮容器样式
    .right-button-pot{
      //设置高度
      height: 100%;
      .el-row{
        margin-top: 20px; //设置按钮与上边的距离
      }
    }
  }
</style>
